import { Directive, DirectiveBinding, App } from 'vue';
import type { VNode } from 'vue';

export type Args = {
    decimal?: number;
    intLimit?: number;
    max?: number;
    min?: number;
};

export const limitNumber: Directive = {
    mounted(el, binding: DirectiveBinding, vnode: VNode) {
        const input = el instanceof HTMLInputElement ? el : el.querySelector('input');
        const { decimal, intLimit = 0, max, min }: Args = binding.value;
        input.addEventListener('keyup', (e: any) => {
            let tempValue = e.target.value.replace(/[^\d.]/g, '');
            if (intLimit > 0) {
                // 限制整数位的输入
                const reg = new RegExp('^(\\d{' + intLimit + '})\\d*((\\.\\d)*)$'); // 只保留intLimit位整数位
                tempValue = tempValue.replace(reg, '$1$2');
            }
            if (!decimal || decimal === 0) {
                // 整数
                tempValue = tempValue.replace(/[^\d]/g, '');
            } else {
                const reg = new RegExp('^(\\d*)(\\.\\d{' + decimal + '}).*$'); // 只保留decimalNum个小数位

                tempValue = tempValue.replace(reg, '$1$2');
                if (tempValue.split('.').length > 2) {
                    tempValue = tempValue.split('.').slice(0, 2).join('.');
                }
            }
            tempValue = tempValue.replace(/\.{2,}/g, '.');
            tempValue = tempValue.replace(/^0{2,}/g, 0);
            if (max && max < e.target.value) {
                tempValue = max;
            }
            if (min && e.target.value !== '' && min > e.target.value) {
                tempValue = min;
            }
            e.target.value = tempValue;
            e.target.dispatchEvent(new Event('input'));
        });
    },
};

export const limitNumberBlur: Directive = {
    mounted(el, binding: DirectiveBinding, vnode: VNode) {
        const input = el instanceof HTMLInputElement ? el : el.querySelector('input');
        const { decimal, intLimit = 0, max, min }: Args = binding.value;
        input.addEventListener('blur', (e: any) => {
            let tempValue = e.target.value.replace(/[^\d.]/g, '');
            if (intLimit > 0) {
                // 限制整数位的输入
                const reg = new RegExp('^(\\d{' + intLimit + '})\\d*((\\.\\d)*)$'); // 只保留intLimit位整数位
                tempValue = tempValue.replace(reg, '$1$2');
            }
            if (!decimal || decimal === 0) {
                // 整数
                tempValue = tempValue.replace(/[^\d]/g, '');
            } else {
                const reg = new RegExp('^(\\d*)(\\.\\d{' + decimal + '}).*$'); // 只保留decimalNum个小数位

                tempValue = tempValue.replace(reg, '$1$2');
                if (tempValue.split('.').length > 2) {
                    tempValue = tempValue.split('.').slice(0, 2).join('.');
                }
            }
            tempValue = tempValue.replace(/\.{2,}/g, '.');
            tempValue = tempValue.replace(/^0{2,}/g, 0);
            if (max && max < e.target.value) {
                tempValue = max;
            }
            if (min && e.target.value !== '' && min > e.target.value) {
                tempValue = min;
            }
         
            // tempValue = tempValue as string;
            // if(tempValue.startsWith && tempValue.startsWith('0')) {
            //     tempValue = tempValue.replace(/^(0+)/,'');
            // }
            
            e.target.value = tempValue;
            e.target.dispatchEvent(new Event('input'));
        });
    },
};

export default {
    install(app: App) {
        app.directive('limitNumber', limitNumber);
        app.directive('limitNumberBlur',limitNumberBlur)
    },
};
